<template>
  <van-card
      v-for="user in props.userList"
      :desc="`个人简介： ${user.profile}`"
      :title="user.username"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag v-for="tag in user.tags" plain type="primary" style="margin-right: 8px; margin-top: 8px">{{ tag }}</van-tag>
    </template>
    <template #footer>
      <van-button plain hairline icon="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png" type="primary" @click="doChat(user.id, user.username)" size="small">私聊我</van-button>
    </template>
  </van-card>
</template>

<script setup lang="ts">
import {UserType} from "../models/user";
import {useRouter} from "vue-router";
const router = useRouter()
interface UserCardListProps {
  userList: UserType[];
}

const props = withDefaults(defineProps<UserCardListProps>(), {
  userList: []
})

const doChat = (userId: number, username: string) => {
  router.push({
    path: "/chat",
    query: {
      userId: userId,
      username: username
    }
  })
}
</script>

<style scoped>

</style>